CSS @property likums: Atklājiet pielāgoto īpašību tipu definēšanas spēku

CSS pasaule nepārtraukti attīstās, un viens no jaunākajiem un jaudīgākajiem papildinājumiem ir @property likums. Šis likums nodrošina mehānismu pielāgotu īpašību tipu definēšanai, sniedzot lielāku kontroli un elastību jūsu CSS un paverot durvis sarežģītākām animācijām, uzlabotām tēmu veidošanas iespējām un kopumā robustākai CSS arhitektūrai. Šajā rakstā mēs padziļināti aplūkosim @property likumu, izpētot tā sintaksi, iespējas un praktiskos pielietojumus, vienlaikus paturot prātā globālu auditoriju.

Kas ir CSS pielāgotās īpašības (mainīgie)?

Pirms iedziļināties @property likumā, ir svarīgi izprast CSS pielāgotās īpašības, kas pazīstamas arī kā CSS mainīgie. Pielāgotās īpašības ļauj jums definēt atkārtoti lietojamas vērtības jūsu CSS, padarot stila lapas vieglāk uzturamas un atjaunināmas. Tās tiek deklarētas, izmantojot --mainīgā-nosaukums sintaksi, un tām piekļūst, izmantojot var() funkciju.

Piemērs:

:root {
  --primary-color: #007bff; /* Globāli definēta primārā krāsa */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

Šajā piemērā --primary-color un --secondary-color ir pielāgotās īpašības. Ja jums ir nepieciešams mainīt primāro krāsu visā jūsu vietnē, jums to jāatjaunina tikai vienā vietā – :root selektorā.

Pamata pielāgoto īpašību ierobežojumi

Lai gan pielāgotās īpašības ir neticami noderīgas, tām ir būtisks ierobežojums: tās būtībā tiek uzskatītas par virknēm. Tas nozīmē, ka CSS pēc būtības nezina, kāda veida vērtību pielāgotā īpašība satur (piemēram, skaitli, krāsu, garumu). Lai gan pārlūkprogramma mēģina noteikt tipu, tas var novest pie neparedzētas uzvedības, īpaši attiecībā uz animācijām un pārejām. Piemēram, mēģinājums animēt pielāgotu īpašību, kas satur krāsu, var nedarboties, kā paredzēts, vai nedarboties konsekventi dažādās pārlūkprogrammās.

Iepazīstinām ar @property likumu

@property likums risina šo ierobežojumu, ļaujot jums skaidri definēt pielāgotās īpašības tipu, sintaksi, sākotnējo vērtību un pārmantošanas uzvedību. Tas nodrošina daudz robustāku un paredzamāku veidu, kā strādāt ar pielāgotajām īpašībām, īpaši tās animējot vai veidojot pārejas.

@property likuma sintakse

@property likuma pamata sintakse ir šāda:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

Sadalīsim katru likuma daļu:

• --property-name: Šis ir jūsu definējamās pielāgotās īpašības nosaukums. Tam jāsākas ar divām defisēm (--).
• syntax: Šis definē pielāgotās īpašības vērtības gaidāmo tipu. Tā ir virkne, kas apraksta derīgo(-s) vērtību(-as) pielāgotajai īpašībai. Biežākās sintakses vērtības ietver:
• *: Atbilst jebkurai vērtībai. Šī ir noklusējuma vērtība, ja sintakse nav norādīta. Izmantojiet to uzmanīgi, jo tā apiet tipu pārbaudi.
• <color>: Atbilst jebkurai derīgai CSS krāsas vērtībai (piem., #ff0000, rgb(255, 0, 0), red).
• <length>: Atbilst jebkurai derīgai CSS garuma vērtībai (piem., 10px, 2em, 50%).
• <number>: Atbilst jebkuram skaitlim (piem., 1, 3.14, -2.5).
• <integer>: Atbilst jebkuram veselam skaitlim (piem., 1, -5, 0).
• <angle>: Atbilst jebkurai leņķa vērtībai (piem., 45deg, 0.5rad, 100grad).
• <time>: Atbilst jebkurai laika vērtībai (piem., 1s, 500ms).
• <percentage>: Atbilst jebkurai procentuālai vērtībai (piem., 50%, 100%).
• <image>: Atbilst jebkurai attēla vērtībai (piem., url(image.jpg), linear-gradient(...)).
• <string>: Atbilst jebkurai virknes vērtībai (iekļautai dubultajās vai vienkāršajās pēdiņās).
• Varat arī apvienot sintakses deskriptorus, izmantojot |, lai atļautu vairākus tipus (piem., <length> | <percentage>).
• Varat izmantot regulārās izteiksmes, lai definētu sarežģītāku sintaksi. Tas izmanto CSS vispārīgos atslēgvārdus inherit, initial, unset un revert kā derīgas vērtības, ja sintakse tos norāda, pat ja parasti tie nav atļauti sintakses tipam. Piemērs: '\d+px' atļauj vērtības, piemēram, '10px', '200px', bet ne '10em'. Ievērojiet, ka atpakaļsvītra ir jānorāda divreiz.
• inherits: Šī ir Būla vērtība (true vai false), kas norāda, vai pielāgotajai īpašībai jāpārmanto tās vērtība no vecākelementa. Noklusējuma vērtība ir false.
• initial-value: Šis definē pielāgotās īpašības sākotnējo vērtību. Šī ir vērtība, kāda būs īpašībai, ja tā nav skaidri iestatīta elementam. Ir svarīgi norādīt derīgu sākotnējo vērtību, kas atbilst definētajai syntax. Ja sākotnējā vērtība nav norādīta un īpašība nav pārmantota, tās sākotnējā vērtība būs nederīga īpašības vērtība.

@property likuma praktiski piemēri

Aplūkosim dažus praktiskus piemērus, lai ilustrētu, kā @property likumu var izmantot reālās situācijās.

1. piemērs: pielāgotas krāsas animēšana

Krāsu animēšana, izmantojot standarta CSS pārejas, dažkārt var būt sarežģīta. @property likums to padara daudz vieglāku.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Pārejot ar kursoru, mainīt uz zaļu krāsu */
}

Šajā piemērā mēs definējam pielāgotu īpašību ar nosaukumu --brand-color un norādām, ka tās sintakse ir <color>. Mēs arī iestatām sākotnējo vērtību #007bff (zils tonis). Tagad, kad kursors tiek novietots virs .element, fona krāsa vienmērīgi pāriet no zilas uz zaļu.

2. piemērs: pielāgota garuma animēšana

Garumu (piemēram, platuma, augstuma) animēšana ir vēl viens izplatīts @property likuma pielietojums.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Šeit mēs definējam pielāgotu īpašību ar nosaukumu --element-width un norādām, ka tās sintakse ir <length>. Sākotnējā vērtība ir iestatīta uz 100px. Kad kursors tiek novietots virs .element, tā platums vienmērīgi pāriet no 100px uz 200px.

3. piemērs: pielāgotas progresa joslas izveide

@property likumu var izmantot, lai izveidotu pielāgotas progresa joslas ar lielāku kontroli pār animāciju.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

Šajā piemērā mēs definējam pielāgotu īpašību ar nosaukumu --progress, kas attēlo progresa procentuālo daļu. Pēc tam mēs izmantojam calc() funkciju, lai aprēķinātu progresa joslas platumu, pamatojoties uz --progress vērtību. Iestatot data-progress atribūtu uz .progress-bar elementa, mēs varam kontrolēt progresa līmeni.

4. piemērs: tēmu veidošana ar pielāgotajām īpašībām

@property likums uzlabo tēmu veidošanu, nodrošinot uzticamāku un paredzamāku uzvedību, pārejot starp dažādām tēmām. Apsveriet šādu piemēru vienkāršai tumšās/gaišās tēmas pārslēgšanai:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Gaišās tēmas noklusējums */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Gaišās tēmas noklusējums */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Tumšā tēma */
    --text-color: #ffffff;
}

Definējot --bg-color un --text-color ar @property likumu, pāreja starp tēmām būs vienmērīgāka un uzticamāka, salīdzinot ar pamata pielāgoto īpašību izmantošanu bez definētiem tipiem.

Pārlūkprogrammu saderība

2023. gada beigās pārlūkprogrammu atbalsts @property likumam ir vispārīgi labs modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr vienmēr ir ieteicams pārbaudīt jaunāko pārlūkprogrammu saderības informāciju tādās vietnēs kā Can I Use (caniuse.com), lai nodrošinātu, ka jūsu mērķauditorijai ir atbilstošs atbalsts šai funkcijai.

Ja jums ir nepieciešams atbalstīt vecākas pārlūkprogrammas, kas neatbalsta @property likumu, varat izmantot funkciju noteikšanu ar JavaScript un nodrošināt rezerves risinājumus. Piemēram, varat izmantot JavaScript, lai noteiktu, vai pārlūkprogramma atbalsta CSS.registerProperty (JavaScript API, kas saistīts ar @property), un pēc tam piemērot alternatīvus stilus, ja tas netiek atbalstīts.

Labākās prakses @property likuma izmantošanai

Šeit ir dažas labākās prakses, kas jāpatur prātā, izmantojot @property likumu:

• Rūpīgi definējiet sintaksi: Izvēlieties vispiemērotāko sintakses vērtību savai pielāgotajai īpašībai. Tas palīdzēs novērst kļūdas un nodrošinās, ka jūsu CSS darbojas, kā paredzēts.
• Norādiet sākotnējās vērtības: Vienmēr norādiet initial-value savām pielāgotajām īpašībām. Tas nodrošina, ka īpašībai ir derīga vērtība, pat ja tā nav skaidri iestatīta elementam.
• Apsveriet pārmantošanu: Rūpīgi pārdomājiet, vai jūsu pielāgotajai īpašībai vajadzētu pārmantot vērtību no vecākelementa. Vairumā gadījumu vislabāk ir iestatīt inherits uz false, ja vien jums nav īpaša iemesla iespējot pārmantošanu.
• Izmantojiet aprakstošus īpašību nosaukumus: Izvēlieties aprakstošus nosaukumus savām pielāgotajām īpašībām, kas skaidri norāda to mērķi. Tas padarīs jūsu CSS lasāmāku un vieglāk uzturamu. Piemēram, --color vietā izmantojiet --primary-button-color.
• Rūpīgi pārbaudiet: Pārbaudiet savu CSS dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu, ka tas darbojas, kā paredzēts. Īpašu uzmanību pievērsiet animācijām un pārejām, jo tās ir jomas, kurās @property likumam var būt vislielākā ietekme.
• Dokumentējiet savu kodu: Pievienojiet komentārus savam CSS, lai paskaidrotu savu pielāgoto īpašību mērķi un to, kā tās tiek izmantotas. Tas atvieglos citiem izstrādātājiem (un jums pašiem nākotnē) saprast jūsu kodu.

Pieejamības apsvērumi

Izmantojot @property likumu, ir svarīgi ņemt vērā pieejamību. Nodrošiniet, lai jūsu animācijas un pārejas nebūtu pārāk traucējošas vai dezorientējošas lietotājiem ar kognitīviem traucējumiem. Izvairieties no animācijām, kas mirgo vai zibsnī, jo tās var izraisīt lēkmes dažiem indivīdiem.

Tāpat pārliecinieties, ka jūsu krāsu izvēle nodrošina pietiekamu kontrastu lietotājiem ar redzes traucējumiem. Varat izmantot tādus rīkus kā WebAIM Contrast Checker, lai pārbaudītu, vai jūsu krāsu kombinācijas atbilst pieejamības vadlīnijām.

Globālie apsvērumi

Izstrādājot vietnes un lietojumprogrammas globālai auditorijai, ir svarīgi ņemt vērā kultūras atšķirības un lokalizāciju. Šeit ir dažas lietas, kas jāpatur prātā, izmantojot @property likumu globālā kontekstā:

• Teksta virziens: Apzinieties teksta virzienu (no kreisās uz labo vs. no labās uz kreiso), izmantojot pielāgotās īpašības, lai kontrolētu izkārtojumu vai pozicionēšanu. Izmantojiet loģiskās īpašības (piemēram, margin-inline-start, nevis margin-left), lai nodrošinātu, ka jūsu izkārtojums pareizi pielāgojas dažādiem teksta virzieniem.
• Skaitļu un datumu formāti: Esiet uzmanīgi ar dažādiem skaitļu un datumu formātiem, ko izmanto dažādās valstīs. Izvairieties no konkrētu formātu kodēšanas savā CSS un tā vietā paļaujieties uz pārlūkprogrammas noklusējuma formatēšanu vai izmantojiet JavaScript, lai formatētu skaitļus un datumus atbilstoši lietotāja lokalizācijai.
• Krāsu simbolika: Apzinieties, ka krāsām dažādās kultūrās var būt dažādas nozīmes. Izvairieties no krāsu izmantošanas, kas noteiktās kultūrās varētu tikt uzskatītas par aizskarošām vai nepiemērotām.
• Valodu atbalsts: Nodrošiniet, lai jūsu pielāgotās īpašības pareizi darbotos ar dažādām valodām. Pārbaudiet savu vietni ar dažādām valodām, lai identificētu jebkādas iespējamās problēmas.

CSS pielāgoto īpašību un @property likuma nākotne

@property likums ir nozīmīgs solis uz priekšu CSS evolūcijā. Tā kā pārlūkprogrammu atbalsts turpina uzlaboties, mēs varam sagaidīt vēl inovatīvākus šīs jaudīgās funkcijas pielietojumus. Nākotnē mēs varētu redzēt jaunas sintakses vērtības, kas pievienotas @property likumam, lai atbalstītu sarežģītākus datu tipus, piemēram, masīvus un objektus. Mēs varētu arī redzēt labāku integrāciju ar JavaScript, ļaujot izstrādātājiem dinamiski izveidot un manipulēt ar pielāgotajām īpašībām izpildes laikā.

Pielāgoto īpašību un @property likuma kombinācija paver ceļu uz modulārāku, vieglāk uzturamu un jaudīgāku CSS arhitektūru. Pieņemot šīs funkcijas, izstrādātāji var radīt sarežģītākas un saistošākas tīmekļa pieredzes, kas ir pieejamas lietotājiem visā pasaulē.

Noslēgums

@property likums dod tīmekļa izstrādātājiem iespēju definēt pielāgotus īpašību tipus, paverot jaunas iespējas animācijām, tēmu veidošanai un vispārējai CSS arhitektūrai. Izprotot tā sintaksi, iespējas un labākās prakses, jūs varat izmantot šo jaudīgo funkciju, lai izveidotu robustākas, vieglāk uzturamas un vizuāli pievilcīgākas tīmekļa lietojumprogrammas. Tā kā pārlūkprogrammu atbalsts turpina pieaugt, @property likums neapšaubāmi kļūs par būtisku rīku modernā tīmekļa izstrādātāja rīkkopā. Pieņemiet šo tehnoloģiju, eksperimentējiet ar tās iespējām un atraisiet pilnu CSS pielāgoto īpašību potenciālu.

Papildu lasāmviela

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1